<template>
	<view class="password-page">
		<view class="form-box">
			<u--form ref="uForm" :model="form" :rules="rules" labelPosition="left" labelWidth="136rpx">
				<u-form-item label="设置密码" prop="loginpass">
					<u--input v-model="form.loginpass" type="number" maxlength="6" placeholder="设置支付密码" border="none" :password="hidePassword"></u--input>
					<view class="icon" slot="right" @click="hidePassword = !hidePassword">
						<u-icon :name="hidePassword ? 'eye-fill' : 'eye-off'"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="再次输入" prop="quepass">
					<u--input v-model="form.quepass" type="number" maxlength="6" placeholder="设置支付密码" border="none" :password="hideQuepass"></u--input>
					<view class="icon" slot="right" @click="hideQuepass = !hideQuepass">
						<u-icon :name="hideQuepass ? 'eye-fill' : 'eye-off'"></u-icon>
					</view>
				</u-form-item>
			</u--form>
		</view>
		<view class="tips-box">支付密码：6位的数字，不可以是连续或者重复的数字</view>
		<view class="button-box">
			<button class="btn">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				form: {
					loginpass: '',
					hideQuepass: '',
				},
				rules: {
					loginpass: [
						{ required: true, message: '请输入支付密码', trigger: 'blur' },
						{ len: 6, message: '请输入正确的支付密码', trigger: 'blur' },
					],
					quepass: [
						{ required: true, message: '请再次输入支付密码', trigger: 'blur' },
						{ len: 6, message: '请输入正确的支付密码', trigger: 'blur' },
					],
				},
				
				hidePassword: true,
				hideQuepass: true
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.password-page {
	box-sizing: border-box;
	padding: 26rpx 0;
	min-height: 100%;
	background-color: #f5f5f5;
	.form-box {
		padding: 0 32rpx;
		background-color: #fff;
		.icon {
			width: 26px;
			height: 26px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.tips-box {
		padding: 24rpx 40rpx;
		color: #ff4c0d;
		font-size: 26rpx;
	}
	.button-box {
		margin-top: 60vh;
		padding: 0 40rpx;
		.btn {
			border-radius: 90rpx;
			color: #fff;
			line-height: 90rpx;
			background-color: #5749f7;
		}
	}
}
</style>
